<template>
    <div>
        <div class="container">
            <h1 style="margin: 5px; text-align: center; font-size: 25px; font-family: 'microsoft yahei';">yudaxian搜索</h1>
            <!-- 搜索框 -->
            <div class="search-box">
                <a-input-search
                    v-model:value="searchParams.text"
                    placeholder="input search text"
                    enter-button
                    @search="onSearch"
                />
            </div>
            <div class="result-list" >
                <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
                    <a-tab-pane key="post">
                        <template #tab>
                            <span>
                            <FileWordTwoTone />
                            文章
                            </span>
                        </template>
                        <Article :post-list="postList" />
                    </a-tab-pane>
                    <a-tab-pane key="picture">
                        <template #tab>
                            <span>
                            <FileImageTwoTone />
                            图片
                            </span>
                        </template>
                        <Picture :picture-list="pictureList" />
                    </a-tab-pane>
                    <a-tab-pane key="user">
                        <template #tab>
                            <span>
                            <UsbTwoTone />
                            用户
                            </span>
                        </template>
                        <User :user-list="userList" />
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, watchEffect, getCurrentInstance, nextTick } from "vue"
const { proxy } = getCurrentInstance();
import { FileWordTwoTone, FileImageTwoTone, UsbTwoTone } from '@ant-design/icons-vue';
import Article from '@/components/Article.vue'
import Picture from '@/components/Picture.vue'
import User from '@/components/User.vue'
import { useRouter, useRoute } from "vue-router";
import { querySearchAll } from "@/api/home.js";
import { message } from 'ant-design-vue';

const router = useRouter();
const route = useRoute();
const activeKey = route.params.category

const postList = ref([])
const userList = ref([])
const pictureList = ref([])

const initSearchParams = ref({
    text: ''
})

const searchParams = ref(initSearchParams.value)

watchEffect(() => {
    searchParams.value = {
        ...initSearchParams.value,
        text: route.query.text
    }
})


const onSearch = () => {
    router.push({
        query: searchParams.value
    })
    loadData(searchParams.value)
}

const loadData = (params) => {
    querySearchAll(params).then(res => {
        if (res.data.code === 0) {
            postList.value = res.data.data.postList
            pictureList.value = res.data.data.pictureList
            userList.value = res.data.data.userList
        } else {
            message.error(res.data.data.message)
        }
    })
}

loadData(searchParams.value)


const handleTabChange = (key) => {
    router.push({
        path: `/${key}`,
        query: searchParams.value
    })
    
}

</script>

<style scoped lang="less">
.container {
    width: 1024px;
    margin: 0 auto;
    .search-box {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}
</style>
